<template>
  <div class="procurement-page">
    <div class="header">
      <span class="title">申请单明细</span>
      <div class="btn">
        <el-button
          round
          size="mini"
          @click="onBJ"
          type="success"
          icon="el-icon-check"
        >
          标 &ensp; 记&ensp;
        </el-button>
        <el-button
          round
          size="mini"
          type="success"
          icon="el-icon-close"
          @click="onQXBJ"
          >取消标记</el-button
        >
        <el-button
          round
          size="mini"
          type="success"
          icon="el-icon-picture-outline"
          @click="onTT"
        >
          挑 图
        </el-button>
        <el-button
          @click="onPack"
          round
          size="mini"
          type="success"
          icon="el-icon-files"
        >
          打 包
        </el-button>
      </div>
      <!-- <div class="form">
        <el-form
          :inline="true"
          :model="searchForm"
          class="demo-form-inline"
          size="mini"
        >
          <el-form-item label="" style="width: 90px">
            <el-select placeholder="">
              <el-option label="参数名称" value="1"></el-option>
              <el-option label="物料编码" value="2"></el-option>
              <el-option label="物料名称" value="3"></el-option>
              <el-option label="规格型号" value="4"></el-option>
              <el-option label="单据号" value="5"></el-option>
              <el-option label="项目号" value="6"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="" style="width: 140px">
            <el-input></el-input>
          </el-form-item>
          <el-form-item label="" style="width: 60px">
            <el-select placeholder="">
              <el-option label="条件" value="1"></el-option>
              <el-option label="或" value="2"></el-option>
              <el-option label="且" value="3"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="" style="width: 90px">
            <el-select placeholder="">
              <el-option label="参数名称" value="1"></el-option>
              <el-option label="物料编码" value="2"></el-option>
              <el-option label="物料名称" value="3"></el-option>
              <el-option label="规格型号" value="4"></el-option>
              <el-option label="单据号" value="5"></el-option>
              <el-option label="项目号" value="6"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="" style="width: 140px">
            <el-input></el-input>
          </el-form-item>
          <el-form-item label="" style="width: 60px">
            <el-select placeholder="">
              <el-option label="条件" value="1"></el-option>
              <el-option label="或" value="2"></el-option>
              <el-option label="且" value="3"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="" style="width: 90px">
            <el-select placeholder="">
              <el-option label="参数名称" value="1"></el-option>
              <el-option label="物料编码" value="2"></el-option>
              <el-option label="物料名称" value="3"></el-option>
              <el-option label="规格型号" value="4"></el-option>
              <el-option label="单据号" value="5"></el-option>
              <el-option label="项目号" value="6"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="" style="width: 140px">
            <el-input></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="success" plain icon="el-icon-search">
              搜 索
            </el-button>
          </el-form-item>
        </el-form>
      </div> -->

      <!-- <div class="save-btn">
        <el-button size="small" type="success" icon="el-icon-folder">
          保 存
        </el-button>
      </div> -->
    </div>
    <div class="body">
      <el-table
        ref="table"
        :data="tableData"
        border
        style="width: 100%"
        header-align="center"
        @selection-change="changeRow"
        @select="select"
      >
        <el-table-column fixed type="selection" align="center">
        </el-table-column>
        <el-table-column
          prop="Picker"
          label="标记者"
          width="120"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="PickTime"
          label="标记时间"
          width="150"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="FDOCUMENTSTATUS"
          label="状态"
          width="120"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="FBILLNO"
          label="单据号"
          width="120"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="FNUMBER"
          label="项目号"
          width="120"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="MATERIALCODE"
          label="物料编码"
          width="120"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="MATERIALNAME"
          label="物料名称"
          width="120"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="MATERIALSPECIFICATION"
          label="规格型号"
          width="120"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="UNITNAME"
          label="基本单位"
          width="120"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="FileName"
          label="文件名称"
          width="120"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="FDATAVALUE"
          label="表面处理"
          width="120"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="F_AAA_PROJECTETD"
          label="项目交期"
          width="120"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="FReqQty"
          label="申请数量"
          width="120"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="FApproveQty"
          label="批准数量"
          width="120"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="FNAME" label="申请人" width="120" align="center">
        </el-table-column>
        <el-table-column
          prop="FFULLNAME"
          label="部门"
          width="120"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="FApplicationDate"
          label="申请日期"
          width="120"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="" label="审核日期" width="120" align="center">
        </el-table-column>
        <el-table-column prop="" label="备注" width="120" align="center">
        </el-table-column>
        <el-table-column fixed="right" label="预览" width="100" align="center">
          <template v-slot="{ row }">
            <el-button type="warning" plain @click="view(row)" size="small"
              >预览</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryData.intPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="queryData.number"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { getImportPurchaseListApi, PurchaseApiApi } from "@/api/procurement";
export default {
  data() {
    return {
      searchForm: {},
      tableData: [],
      queryData: {
        number: 10,
        intPage: 1,
        TrueName: "admin",
        searchtimes: "0",
      },
      total: 0,
      selectionList: [],
      isBJ: false,
    };
  },
  created() {
    this.getImportPurchaseList();
  },
  methods: {
    async getImportPurchaseList() {
      const res = await getImportPurchaseListApi(this.queryData);
      console.log(res);
      this.tableData = res.data.rows;
      this.total = res.data.total;
    },
    view() {},
    changeRow(row) {
      console.log(row);
      this.selectionList = row;
    },
    select(selection, row) {
      // console.log(selection);
      // console.log(row);
    },
    async onBJ() {
      if (!this.selectionList.length) {
        this.$message.warning("请先选择数据");
        return;
      }
      // this.isBJ = true;
      const IDlist = this.selectionList.map((ele) => {
        return ele.ID;
      });
      const res = await PurchaseApiApi({
        postpara: {
          posttype: "ComsurePickByList",
        },
        ureentity: IDlist,
        ComsurePickUser: "admin",
      });
      console.log(res);
      this.getImportPurchaseList();
      this.$refs.table.toggleRowSelection(this.selectionList);
      // const now = new Date(); // 创建一个Date对象，表示当前时间
      // const hours = this.padZero(now.getHours()); // 获取当前小时数
      // const minutes = this.padZero(now.getMinutes()); // 获取当前分钟数
      // const seconds = this.padZero(now.getSeconds()); // 获取当前秒数
      // const year = now.getFullYear(); // 获取当前年份
      // const month = this.padZero(now.getMonth() + 1); // 获取当前月份，月份从 0 开始，所以需要加 1
      // const day = this.padZero(now.getDate()); // 获取当前日期
      // // console.log(`${year}-${month}-${day} ${hours}:${minutes}:${seconds}`); // 输出格式化后的时间字符串

      // this.selectionList = this.selectionList.map((ele) => {
      //   ele.Picker = "admin";
      //   ele.PickTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
      //   return ele;
      // });
    },
    async onQXBJ() {
      if (!this.selectionList.length) {
        this.$message.warning("请先选择数据");
        return;
      }
      // this.isBJ = false;
      // this.selectionList = this.selectionList.map((ele) => {
      //   ele.Picker = "";
      //   ele.PickTime = "";
      //   return ele;
      // });
      const IDlist = this.selectionList.map((ele) => {
        return ele.ID;
      });
      const res = await PurchaseApiApi({
        postpara: {
          posttype: "CancelPickByList",
        },
        ureentity: IDlist,
        CancelPickUser: "admin",
      });
      console.log(res);
      this.getImportPurchaseList();
      this.$refs.table.clearSelection();
    },
    async onTT() {
      if (!this.selectionList.length) {
        this.$message.warning("请先选择数据");
        return;
      }
      // if (this.isBJ) {
      const MaterialCodelist = this.selectionList.map((ele) => {
        return ele.MATERIALCODE;
      });
      console.log(MaterialCodelist);

      MaterialCodelist.forEach(async (ele) => {
        const res = await PurchaseApiApi({
          postpara: {
            posttype: "PickPhoto",
          },
          MaterialCode: ele,
          PickUser: "admin",
        });
        const data = JSON.parse(res.data);
        console.log(data);

        for (const item of this.selectionList) {
          item.FileName = data.FileName;
        }
      });
      // } else {
      //   this.$message("请先进行标记操作");
      // }
    },
    onPack() {
      if (!this.selectionList.length) {
        this.$message.warning("请先选择数据");
        return;
      }
      // if (this.isBJ) {
      this.$router.push({
        path: "/pack",
        query: { list: this.selectionList },
      });
      // } else {
      //   this.$message("请先进行标记操作");
      // }
    },
    padZero(num) {
      return num.toString().padStart(2, "0");
    },
    handleSizeChange(val) {
      this.queryData.number = val;
      this.getImportPurchaseList();
    },
    handleCurrentChange(val) {
      this.queryData.intPage = val;
      this.getImportPurchaseList();
    },
  },
};
</script>

<style lang="scss" scoped>
.procurement-page {
  background-color: #fff;

  .header {
    padding: 30px 20px;
    display: flex;
    justify-content: space-between;
    .title {
      padding-top: 7px;
    }
    .btn {
      display: inline-block;
      // margin-left: 20px;
    }
    .form {
      display: inline-block;
      // margin-left: 20px;

      // ::v-deep .el-form-item__content {
      //   width: 100px;
      // }
    }

    .save-btn {
      display: inline-block;
    }
  }
  .body {
    padding: 20px;
  }
}
</style>